<template>
  <div style="margin-top: 20px">
    <svg-icon
      name="icon-fanhui"
      @click="gobakc"
      class="gobakcnow click"
    ></svg-icon>

    <!-- 大图预览 -->
    <el-image-viewer
      v-if="imgViewerVisible"
      @close="closeImgViewer"
      :url-list="imgViewerList"
      :initialIndex="viewImgIndex"
      :hideOnClickModal="true"
    >
    </el-image-viewer>

    <div class="detail f-a-c">
      <div class="detaildiv f-a-c">
        <div class="detailLeft">
          <el-carousel
            trigger="click"
            height="700px"
            :autoplay="false"
            @change="changeimg"
          >
            <el-carousel-item
              v-for="(item, index) in img"
              :key="index"
              class="f-j-a-c"
            >
              <div class="detaillist f-j-a-c">
                <div class="detailimg f-j-a-c">
                  <div class="dujiang" v-if="datalist.isExclusive == 1">
                    <svg-icon class="dujiaitem" name="dujia"></svg-icon>
                  </div>
                  <img
                    class="click"
                    ref="carouselRef"
                    :src="item.url"
                    alt=""
                    @load="calculateCarouselHeight"
                    :class="bigimg ? 'longimgs' : 'imgs'"
                  />

                  <div class="imgs-hover-box f-a-c">
                    <div
                      class="f-j-a-c"
                      title="查看大图"
                      @click="viewImg(item, index)"
                    >
                      <svg-icon name="icon-fangda"></svg-icon>
                    </div>

                    <div
                      class="f-j-a-c"
                      title="查看提示词"
                      @click="modulImgLICK(item)"
                      v-if="datalist.type == 1"
                    >
                      <svg-icon name="icon-tsc"></svg-icon>
                    </div>
                  </div>
                </div>

                <div class="popgo f-j-a-c click">
                  <span class="ellipsis" @click="openurl">{{
                    datalist.isOriginal == 0 ? "原创" : datalist.orUrl
                  }}</span>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="detailright">
          <div>
            <div class="f-a-c f-j-sb-a-c rightbox">
              <div class="down f-a-c">
                <div
                  class="button f-a-c f-j-a-c click"
                  @click="buttonClick"
                  :class="{ 'button-img': datalist.type == 0 }"
                >
                  <img src="../../../assets/image/xz.png" alt="" />
                  <span>下载{{ datalist.type == 0 ? "图片" : "模型" }}</span>
                  <svg-icon
                    name="icon-xia"
                    v-if="datalist.type == 1"
                  ></svg-icon>
                </div>

                <!-- 在线生成 -->
                <div
                  v-if="datalist.type == 1"
                  class="button button-create-img f-a-c f-j-a-c click"
                  @click="zaixian"
                >
                  <img src="../../../assets/image/icon-zaixian@2x.png" alt="" />
                  <span>在线生成</span>
                </div>

                <div
                  class="buttonlist f-d-c"
                  v-ClickOutside="() => (downCheck = false)"
                  v-if="downCheck && datalist.type == 1"
                >
                  <div
                    class="buttonitems"
                    v-for="(it, ind) in banbenList"
                    :key="ind"
                    @click="versionClick(it)"
                  >
                    <span>{{ it.text }}</span>
                  </div>
                </div>
              </div>

              <div class="anniu f-a-c">
                <!-- 下载量 -->
                <div class="gognitem f-d-c f-j-a-c">
                  <svg-icon
                    style="width: 24px; height: 24px"
                    name="icon-download-h"
                  ></svg-icon>
                  <span>{{ numToKW(datalist.downloadNum || 0) }}</span>
                </div>

                <!-- 点赞 -->
                <div class="gognitem f-d-c f-j-a-c">
                  <svg-icon
                    class="click"
                    style="width: 24px; height: 24px"
                    name="icon-xihuan"
                    @click.stop="getlike(datalist)"
                    v-if="datalist.like == 0"
                  ></svg-icon>
                  <svg-icon
                    class="click"
                    style="width: 24px; height: 24px"
                    name="icon-xihuan-yx"
                    @click.stop="quxiaodianzan(datalist)"
                    v-else
                  ></svg-icon>

                  <span>{{ numToKW(datalist.praise || 0) }}</span>
                </div>

                <!-- 收藏 -->
                <div class="gognitem f-d-c f-j-a-c">
                  <svg-icon
                    v-if="datalist.collect == 0"
                    class="click"
                    @click.stop="getcollect(datalist)"
                    name="icon-jihe"
                    style="width: 24px; height: 24px"
                  ></svg-icon>
                  <svg-icon
                    class="click"
                    @click.stop="quxiao(datalist)"
                    name="icon-jihe-yx"
                    v-else
                    style="width: 24px; height: 24px"
                  ></svg-icon>
                  <span>{{ numToKW(datalist.collect || 0) }}</span>
                </div>

                <!-- 分享 -->
                <!-- <svg-icon
                  class="click"
                  @click="fuzhi"
                  style="width: 24px; height: 24px; margin-left: 20px"
                  name="icon-send"
                ></svg-icon> -->

                <div class="gognitem f-d-c f-j-a-c">
                  <img
                    style="width: 24px; height: 24px"
                    src="../../../assets/image/icon-gd@2x.png"
                    alt=""
                  />

                  <span>&nbsp;</span>
                </div>
              </div>
            </div>

            <div class="detailuser f-j-sb">
              <div class="useleft f-a-c" v-if="datalist.miniData">
                <userAvatar
         
                  :userImgs="datalist.miniData.user_avatar"
                  :showDv="datalist.status == 1"
                  @click="gouserdetail"
                ></userAvatar>

                <div class="userinfos f-d-c" v-if="datalist.miniData">
                  <div style="" class="f-a-c">
                    <span>{{ datalist.miniData.user_name }}</span>
                    <svg-icon
                      name="icon-dav"
                      style="width: 20px; height: 20px; margin-left: 5px"
                      v-if="datalist.miniData.is_authentication == 1"
                    ></svg-icon>
                    <svg-icon
                      name="icon-guanfang"
                      style="
                        width: 20px;
                        height: 20px;
                        margin-left: 5px;
                        margin-right: 5px;
                      "
                      v-if="datalist.miniData.is_official == 1"
                    ></svg-icon>
                    <span
                      class="dengjiLV"
                      v-if="datalist.miniData.lv"
                    >
                      {{ "LV" + datalist.miniData.lv }}</span
                    >
                  </div>
                  <div class="userinfos-detail f-a-c">
                    <span>{{ datalist.userDetail }}</span>
                  </div>
                </div>
              </div>

              <div
                class="f-j-a-c"
                :class="
                  datalist.map.isCares == 1 ? 'quxiaoattention' : 'attention'
                "
                @click="attention(datalist.map.isCares)"
                v-if="datalist.map"
              >
                <span>{{
                  datalist.map.isCares == 1 ? "取消关注" : "关注"
                }}</span>
              </div>
            </div>

            <div class="f-a-c" v-if="datalist.type == 1">
              <div
                class="version-box"
                v-for="(item, index) in versionList"
                :key="index"
                :class="versionCurrent == index ? 'version-boxactive' : ''"
              >
                <div
                  class="click"
                  @click="banbenCheck(item, index)"
                  :title="versionList[index].title"
                >
                  <!-- 版本 {{ versionList.length - index }} -->
                  版本 {{ item.modelVersion + 1 }}
                </div>
              </div>
            </div>

            <div class="detailmoxing f-j-sb-a-c">
              <div class="detailtle f-d-c">
                <!-- <div class="datailtle-title flex"> -->
                <div class="f-a-c f-j-sb-a-c">
                  <span
                    class="ellipsis"
                    style="font-weight: 700; display: block; width: 280px"
                  >
                    {{ datalist.title }}
                    <svg-icon
                      v-if="
                        datalist.type == 0 && userInfo.userId == datalist.phone
                      "
                      name="icon-trash"
                      style="
                        margin-left: 10px;
                        font-size: 16px;
                        margin-bottom: 3px;
                      "
                      class="click"
                      @click="shanchus"
                    ></svg-icon>
                  </span>
                  <span v-if="datalist.type == 0"
                    >上传时间：{{ datalist.createTime.substring(10, -1) }}</span
                  >
                </div>

                <!-- <svg-icon
                    v-if="datalist.type == 0 && userInfo.userId == datalist.phone"
                    name="icon-trash"
                    style="margin-left: 10px;margin-top:5px;"
                    class="click"
                    @click="shanchus"
                  ></svg-icon> -->
                <!-- </div> -->

                <div class="mingcheneg">
                  <!-- <div class="rightmoxingdetal f-a-c" v-if="datalist.type == 1">
                    <div class="start f-a-c">
                      <el-rate v-model="value" disabled show-score text-color="#ff9900" />
                    </div>
                  </div> -->
                  <span>{{ datalist.detail }}</span>
                </div>
              </div>
            </div>
            <div class="typebox f-a-c f-j-sb-a-c">
              <div class="typeItem f-j-a-c" v-if="datalist.types">
                <span v-if="datalist.types">{{
                  advanceditemlist[Number(datalist.types)].text
                }}</span>
              </div>

              <div class="f-a-c">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="不能商用此图片"
                  placement="top-start"
                >
                  <svg-icon
                    class="imgbian"
                    v-if="datalist.isCommercial == 1 && datalist.type == 0"
                    name="icon-tu-buke"
                  ></svg-icon>
                </el-tooltip>

                <el-tooltip
                  class="item"
                  effect="dark"
                  content="不能用此模型生成的图片商用"
                  placement="top-start"
                >
                  <svg-icon
                    class="imgbian"
                    v-if="datalist.isCommercial == 1 && datalist.type == 1"
                    name="icon-tu-buke"
                  ></svg-icon>
                </el-tooltip>

                <el-tooltip
                  class="item"
                  effect="dark"
                  content="不能商用此模型及其衍生的模型"
                  placement="top-start"
                >
                  <svg-icon
                    class="imgbian"
                    name="icon-mx-buke"
                    v-if="datalist.type == 1 && datalist.isFusion == 1"
                  ></svg-icon>
                </el-tooltip>
              </div>
            </div>
            <div class="typeboxs f-a-c" v-if="!labelList.length">
              <div
                class="typeItems f-j-a-c"
                v-for="(item, index) in labelList"
                :key="index"
              >
                <span>{{ item }}</span>
              </div>
            </div>
          </div>
          <!-- 模型样式 -->
          <div v-if="datalist.type == 1">
            <div class="model">
              <!-- <div class="f-a-c"> -->
              <span style="">模型属性</span>
              <svg-icon
                v-if="userInfo.userId == datalist.phone"
                name="icon-edit"
                style="margin-left: 10px"
                class="click"
                @click="bianjimoxing"
              ></svg-icon>
              <svg-icon
                v-if="userInfo.userId == datalist.phone"
                name="icon-trash"
                style="margin-left: 10px"
                class="click"
                @click="shanchus"
              ></svg-icon>
              <!-- </div> -->
              <div
                class="modetal_item"
                v-for="(item, index) in modeljieshao"
                :key="index"
              >
                <div class="model_detail f-a-c">
                  <span>{{ item.title }}</span>
                  <span v-if="item.content">{{ item.content }}</span>
                  <!-- 哈希 -->
                  <div v-if="index == 2" style="flex: 0.31">
                    <div class="model_list f-a-c">
                      <div class="hashtitle f-j-a-c">
                        <span>{{ item.list[moCurrent].title }}</span>
                      </div>
                      <div class="hashcontent f-j-a-c f-a-c">
                        <span>{{ item.list[moCurrent].item }}</span>
                        <svg-icon
                          style="margin-left: 10px"
                          class="click"
                          name="iocn-copy"
                          @click="copyData(item.list[moCurrent].item)"
                        ></svg-icon>
                      </div>
                      <div class="hashswitch f-j-a-c">
                        <svg-icon
                          class="click"
                          name="icon-zz"
                          @click="gundong"
                        ></svg-icon>
                      </div>
                    </div>
                  </div>
                  <div class="" v-if="index == 3" style="flex-wrap: wrap">
                    <div class="chufa f-a-c" style="padding-bottom: 2px">
                      <div
                        class="chufaitem f-j-a-c f-a-c"
                        v-if="item.list.length"
                      >
                        <span>复制全部</span>
                        <svg-icon
                          class="click"
                          style="margin-left: 10px"
                          name="iocn-copy"
                          @click="copyDataALL(items)"
                        ></svg-icon>
                      </div>
                      <div
                        class="chufaitem f-j-a-c f-a-c"
                        v-for="(items, indexs) in item.list"
                        :key="indexs"
                      >
                        <span>{{ items ? items : "无" }}</span>
                        <!-- 复制按钮 -->
                        <svg-icon
                          class="click"
                          style="margin-left: 10px"
                          :name="item.svg"
                          v-if="items"
                          @click="copyData(items)"
                        ></svg-icon>
                      </div>
                    </div>
                  </div>
                  <!-- <svg-icon class="click" :name="item.svg"></svg-icon> -->
                </div>
              </div>
            </div>

            <div class="modeldescription" v-if="chuanzuodetail">
              <span>创作者说明</span>
              <div class="descriptin">
                <span>{{ chuanzuodetail }}</span>
              </div>
            </div>
          </div>

          <!-- MJ SD 样式 -->
          <div
            class="MJdetail"
            v-else-if="datalist.type != 1 && (CueWord || fanCueWord)"
          >
            <div class="topMJ f-a-c f-j-sb-a-c">
              <span>提示词</span>
              <div class="MJtitle f-a-c">
                <div class="MJitem f-a-c f-j-a-c">
                  <span>{{ compileType }}</span>
                </div>
                <div class="lan f-a-c">
                  <div
                    @click="lanListClck(index)"
                    class="lanitem click f-j-a-c"
                    :class="lancurrent == index ? 'lanactive' : ''"
                    v-for="(item, index) in lanList"
                    :key="index"
                  >
                    {{ item.title }}
                  </div>
                </div>
              </div>
            </div>

            <!-- <div
              class="openword f-j-a-c click"
              v-if="openWordCheck"
              @click="openWordCheckClick()"
            >
              <span>“点击展开提示词”</span>
            </div> -->

            <div class="tishipanel-box">
              <el-collapse-transition>
                <div
                  class="tishipanel"
                  :class="{ 'tishipanel-open': tishipanelOpen }"
                >
                  <div class="f-d-c tishibox" v-if="CueWord">
                    <span>{{ CueWord }}</span>

                    <div class="cuo f-a-c">
                      <svg-icon
                        name="icon-copy-h"
                        @click="copyNows(CueWord)"
                        class="click zheng"
                        style="margin-right: 10px"
                      ></svg-icon>
                      <svg-icon
                        name="plus-circle"
                        class="click zheng"
                      ></svg-icon>
                    </div>
                  </div>

                  <div class="f-d-c tishibox" v-if="fanCueWord">
                    <span>{{ fanCueWord }}</span>
                    <div class="cuo f-a-c">
                      <svg-icon
                        name="icon-copy-h"
                        @click="copyNows(fanCueWord)"
                        class="click zheng"
                        style="margin-right: 10px"
                      ></svg-icon>
                      <svg-icon
                        name="minus-circle"
                        class="click zheng"
                      ></svg-icon>
                    </div>
                  </div>

                  <div class="tishiimg f-a-c f-j-sb-a-c" v-if="clueConfig">
                    <div
                      class="f-a-c"
                      v-for="(item, index) in tishiciimg"
                      :key="index"
                    >
                      <div v-if="clueConfig[item.key]">
                        <svg-icon
                          :name="item.svg"
                          class="click zheng"
                        ></svg-icon>
                        <span>{{ clueConfig[item.key] }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </el-collapse-transition>

              <div class="f-a-c copy-box" v-if="CueWord || fanCueWord">
                <svg-icon
                  name="icon-copy-h"
                  @click="copyNow()"
                  class="click"
                ></svg-icon>
                <svg-icon
                  name="icon-zhankai"
                  class="click zhankai"
                  :class="{ 'zhankai-open': tishipanelOpen }"
                  @click="tishipanelOpen = !tishipanelOpen"
                  style="margin-left: 10px"
                ></svg-icon>
              </div>
            </div>
          </div>

          <div
            class="usermodrul"
            v-if="
              datalist.type == 0 &&
              datalist.listModel.length &&
              productList.length
            "
          >
            <span>所用模型</span>
            <detailgood
              @godetailssss="godetailssss"
              :productList="productList"
            ></detailgood>
          </div>
        </div>
      </div>
    </div>
    <collect
      ref="collects"
      :opentype="opentype"
      @successcollct="successcollct"
      :googlistitem="googlistitem"
    ></collect>
    <!-- <comment
      @pingjiasuccess="pingjiasuccess"
      :typemoxing="typemoxing"
      :typeID="typeID"
      :myEvaluate="myEvaluate"
    ></comment> -->

    <el-dialog
      v-model="paypop"
      style="border-radius: 20px"
      title="购买模型"
      width="480px"
      center
    >
      <div class="useleft f-a-c">
        <userAvatar
          :userImgs="datalist.userImgs"
          :showDv="datalist.status == 1"
          @click="gouserdetail"
        ></userAvatar>

        <div class="userinfos f-d-c">
          <div style="">
            <span>{{ datalist.userName }}</span>
            <div class="userinfos-detail f-a-c">
              <span>{{ datalist.userDetail }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="imgmoxing f-a-c" v-if="img[0]">
        <img :src="img[0].url" alt="" />
        <div class="imgspan f-d-c">
          <span>室内渲染组图</span>
          <span>室内渲染组图</span>
        </div>
      </div>
      <div class="f-d-c" style="margin-top: 20px">
        <el-checkbox
          v-model="checked1"
          label="余额支付（余额：￥0）"
          size="large"
          disabled
          checked
        />
        <div class="f-a-c">
          <el-checkbox v-model="isDeduction" label="硬币抵扣" size="large" />
          <span>￥2.00</span>
        </div>
      </div>
      <div class="goumaojine f-j-a-c">
        <span>购买金额：<span class="red">￥100</span></span>
      </div>
      <div class="queren click f-j-a-c" @click="chongzhiqueren">
        <span>确认</span>
      </div>
      <div class="yuebuzu f-j-a-c">
        <span>余额不足，请<span class="blue click">充值</span></span>
      </div>
    </el-dialog>
    <payPwdPop
      ref="payPwdRef"
      @confirm="postPostsPay"
      :payInfo="payObjInfo"
    ></payPwdPop>
  </div>
</template>

<script>
import payPwdPop from "../../community/components/payPwdPop.vue";

import comment from "./comment.vue";
import collect from "../components/collect.vue";
import ClickOutside from "element-plus/lib/directives/click-outside/index";
import userAvatar from "@/components/userAvatar.vue";
// import { classification, kindList } from "@/utils/advanceditem.js";
let classification = [];
let kindList =[];
import { followNow } from "@/axios/community.js";
import {
  detail,
  like,
  deletelike,
  downloadClick,
  guanzhu,
  evaluate,
  getdetails,
  deleteuser,
  modealdel,
} from "@/axios/api.js";
import { copyData, numToKW } from "@/utils/common.js";
import detailgood from "./detailGood.vue";
import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
  ref,
  onBeforeUnmount,
  nextTick,
  watch,
} from "vue";
import { showLoading, hideLoading } from "@/utils/loading.js";
import { ElMessage, ElMessageBox } from "element-plus";

import { useStore } from "vuex";
import { emit } from "process";
// import { watch } from "fs";
export default defineComponent({
  directives: { ClickOutside },
  components: {
    payPwdPop,
    detailgood,
    collect,
    comment,
    userAvatar,
  },
  setup() {
    let accessToken = computed(() => {
      return store.state.accessToken;
    });
    let userInfo = computed(() => {
      return store.state.minUserInfo;
    });
    const carouselHeight = ref("");
    const carouselRef = ref(null);
    const collects = ref(null);
    const payPwdRef = ref(null);
    const SDpop = ref(null);

    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let data = reactive({
      isDeduction: false, // 硬币抵扣
      paypop: false,
      bigimg: false, //图片大小
      myEvaluate: 0, // 我的评分
      typeID: 0, //模型id
      typemoxing: 0,
      adddialogVisible: false, // 添加收藏夹
      dialogVisible: false, // 收藏夹开关
      value: 5, //评分等级
      imgtou: new URL("../../../assets/image/tx@2x.png", import.meta.url),
      banbenList: [],
      advanceditemlist: [],
      tishiciimg: [
        {
          svg: "icon-tu",
          content: "400*700",
          key: "Size",
        },
        {
          svg: "icon-zhongzi",
          content: "3520012335",
          key: "Seed",
        },
        {
          svg: "icon-cfg",
          content: "7",
          key: "CFG scale",
        },
        {
          svg: "icon-bushu",
          content: "50",
          key: "Steps",
        },
      ],
      compileType: "SD",
      CueWord: "",
      fanCueWord: "",
      clueConfig: "", //提示词
      openWordCheck: true,
      tishipanelOpen: false, //提示词展开
      productList: [],
      lancurrent: 1,
      lanList: [
        {
          title: "中",
        },
        {
          title: "英",
        },
      ],
      moCHeck: false,
      moCurrent: 0, //模型hsha
      modeljieshao: [
        {
          title: "种类：",
          content: "LORA",
          svg: "help-circle",
        },
        {
          title: "底模：",
          content: "SD 1.5",
        },
        {
          title: "哈希：",
          list: [
            {
              title: "AUTOV1",
              item: "95F8D0A7",
            },
            {
              title: "AUTOV2",
              item: "95F8D0A72",
            },
            {
              title: "AUTOV3",
              item: "95F8D0A74",
            },
          ],
        },
        {
          title: "触发词：",
          list: [],
          svg: "iocn-copy",
        },
        {
          title: "上传时间：",
          content: "2023-04-18",
        },
      ],
      list: [
        {
          img: new URL("../../../assets/image/113.png", import.meta.url),
        },
      ],
      versionCurrent: 0,
      id: 0,
      datalist: {},
      labelList: [],
      downCheck: false,
      tmpList: [
        {
          text: "SD 1.4",
          value: 0,
        },
        {
          text: "SD 1.5",
          value: 1,
        },
        {
          text: "SD 2.0",
          value: 2,
        },
        {
          text: "SD 2.0 768",
          value: 3,
        },
        {
          text: "SD 2.1",
          value: 4,
        },
        {
          text: "SD 2.1 768",
          value: 5,
        },
        {
          text: "SD 2.1 Unclip",
          value: 6,
        },
        {
          text: "Others",
          value: 7,
        },
      ],
      kindList: [],
      img: [],
      opentype: false,
      urlData: [],
      fouceCheck: false,
      googlistitem: 0,
      versionList: [], ///版本
      downloadimgClick: false, // 下载按钮点击
      viewImgIndex: 0, //查看大图当前下标
      imgViewerList: [], //预览图片列表
      imgViewerVisible: false, //预览图片显示隐藏
      chuanzuodetail: "",
      modelId: "",
      nameprome: "prompt",
      namepromeCheck: false,
    });
    onUnmounted(() => {
      window.removeEventListener("beforeunload", (e) => beforeunloadHandler(e));
      window.removeEventListener("unload", (e) => unloadHandler(e));
      // store.commit("setmoduleID", 0);
    });
    onMounted(() => {
      showLoading();
      window.addEventListener("beforeunload", (e) => beforeunloadHandler(e));
      window.addEventListener("unload", (e) => unloadHandler(e));

      window.addEventListener("resize", calculateCarouselHeight);
      data.advanceditemlist = classification;
      data.id = router.currentRoute._value.query.id;
      data.kindList = kindList;
      getdetail();
    });

    let beforeunloadHandler = (e) => {
      store.commit("setmoduleID", 0);
    };
    // 硬币抵扣(后续还需判断用户余额)
    let goldCredit = computed(() => {
      let maxCredit = 0 * (coinsConfig.value.percent_every / 100); //最大抵扣金额
      let maxGold = maxCredit * coinsConfig.value.rate; //最大抵扣金额所需硬币
      //如果用户硬币不足
      // if(maxGold > user.gold)  {
      // }
      return {
        price: maxCredit,
        gold: maxGold,
      };
    });
    // 版本切换
    let banbenCheck = (item, index) => {
      if (data.versionCurrent == index) return;
      data.versionCurrent = index;
      data.id = item.id;
      showLoading();
      getdetail();
    };
    // 查询版本
    let getdetailslist = () => {
      getdetails({ id: data.id }).then((res) => {
        data.versionList = [];
        let datasban = res.data;
        datasban.forEach((item, index) => {
          if (item.id == data.id) {
            data.versionList.unshift(item);
          } else {
            data.versionList.push(item);
          }
        });
        console.log(data.versionList);
        data.versionList.sort((a, b) => b.modelVersion - a.modelVersion);
        // 打印排序后的数组
        // data.versionList = datasban;
      });
    };
    let id = computed(() => {
      // console.log(router.currentRoute.value.query.id);
      return router.currentRoute.value.query.id;
    });
    watch(
      () => id.value,
      (newval, oldval) => {
        if (newval) {
          data.id = newval;
          getdetail();
        }
      }
    );
    //评分成功
    let pingjiasuccess = (value) => {
      data.value = value;
    };
    // // 金币配置
    // let coinsConfig = computed(() => {
    //   let setting = store.state.globalConfig;
    //   return setting.app.coins;
    // });

    // 弹框支付信息(后续还需判断用户余额)
    // let payObjInfo = computed(() => {
    //   return {
    //     isDeduction: data.isDeduction, //是否使用硬币抵扣
    //     price: 0 - (data.isDeduction ? goldCredit.value.price : 0), //需支付余额
    //     maxGold: goldCredit.value.gold, //消耗多少硬币
    //     maxCredit: goldCredit.value.price, //抵扣多少金额
    //     goldName: coinsConfig.value.name,
    //   };
    // });
    // 上传类型
    let accept = computed(() => {
      let uploadType = [];
      let typeList = props.type.split(",");
      uploadType = typeList.map((item) => {
        return item.toLowerCase();
      });
      return uploadType;
    });

    // 获取文件后缀
    let getFileType = (file) => {
      let fileType = file.split(".").slice(-1)[0].toLowerCase();
      return fileType;
    };
    let bianjimoxing = () => {
      router.push({
        path: "/uploadModel",
        query: { id: data.datalist.id },
      });
    };
    // 评分
    let getevaluate = () => {};
    let convertSpecialSymbol = (text) => {
      var regex = /\/@\//g;
      return text.replace(regex, ">");
    };
    // 获取下载
    let getdownloadClick = () => {
      downloadClick({ id: data.datalist.id }).then((res) => {
        getdetail();
        data.banbenList = [];
        data.urlData = res.data;
        console.log(data.urlData);
        let name;
        let ckptname;
        let floatnum;
        let datalist = res.data;

        if (data.modeljieshao[0].content == "Checkpoint") {
          data.datalist.data.forEach((item, index) => {
            let datas = {};
            ckptname = item.ckptNum || "";
            floatnum = item.floatnum || "";
            name =
              data.modeljieshao[0].content + "  " + ckptname + "  " + floatnum;
            datas.text = name + item.text / 1024;
            data.banbenList.push(datas);
          });
        } else {
          datalist.forEach((item, index) => {
            if (getFileType(item.url) == "yaml") {
              name = "Config";
            } else if (
              getFileType(item.url) == "pt" ||
              getFileType(item.url) == "pth"
            ) {
              name = "Vae";
            } else {
              name = data.modeljieshao[0].content;
            }
            console.log(item);
            let datas = {};
            if (item.size > 0) {
              if (item.size < 1024) {
                datas.text =
                  name + "(" + Number(item.size).toFixed(2) + "MB " + ")";
              } else if (item.size < 1) {
                datas.text =
                  name + "(" + Number(item.size).toFixed(2) + "KB" + ")";
              } else {
                datas.text =
                  name + "(" + (item.size / 1024).toFixed(2) + "GB " + ")";
              }
            } else {
              datas.text = name;
            }

            datas.url = item.url;
            // datas.size =;
            data.banbenList.push(datas);
          });
        }
        if (data.datalist.type == 0 && data.downloadimgClick) {
          console.log(data.urlData);
          data.urlData.forEach(async (item, index) => {
            console.log(item);
            await downloadByBlob(item.url, data.datalist.type);
          });
        }
      });
    };
    onBeforeUnmount(() => {
      window.removeEventListener("resize", calculateCarouselHeight);
    });
    let quxiao = () => {
      if (!userInfo.value) return ElMessage.warning("请先登录");

      collects.value.getdeleteCollect(data.datalist.id);
    };
    // 关注
    let getguanzhu = () => {
      guanzhu({ targetId: data.datalist.phone })
        .then((res) => {
          ElMessage.success("关注成功");
          data.fouceCheck = true;
          getdetail();
        })
        .catch((err) => {
          ElMessage.warning(err.message);
        });
    };
    let getChekpoint = () => {
      data.modeljieshao[0].content =
        data.kindList[data.datalist.checkPoint].text;
      data.modeljieshao[1].content = data.tmpList[data.datalist.bmodel].text;

      let listarr = [];
      listarr = data.datalist.triggers.split(",");
      data.modeljieshao[3].list = listarr;
      data.modeljieshao[4].content = data.datalist.createTime;
    };
    // 收藏夹关闭
    let close = () => {
      data.dialogVisible = false;
      data.adddialogVisible = false;
    };
    let buttonClick = async () => {
      if (!userInfo.value) return ElMessage.warning("请先登录");

      data.downCheck = !data.downCheck;
      data.downloadimgClick = true;

      await getdownloadClick();
    };
    // 收藏
    let getcollect = (item) => {
      if (!userInfo.value) return ElMessage.warning("请先登录");

      data.opentype = true;
      data.googlistitem = item.id;
      // data.dialogVisible = true;
    };
    let downloadByBlob = (imgUrl, type) => {
      if (type == 1) {
        let eleLink = document.createElement("a");
        eleLink.download = new Date().getTime();
        eleLink.href = imgUrl;
        eleLink.click();
        eleLink.remove(); // 用完释放URL对象
        URL.revokeObjectURL(imgUrl);
      } else {
        let image = new Image();
        image.setAttribute("crossOrigin", "anonymous");
        image.crossOrigin = "anonymous";
        image.src = imgUrl + `?timestamp= ${Date.now()}`;
        image.onload = () => {
          let canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          let ctx = canvas.getContext("2d");
          ctx.drawImage(image, 0, 0, image.width, image.height);
          canvas.toBlob((blob) => {
            let url = URL.createObjectURL(blob); // download(url);
            let eleLink = document.createElement("a");
            eleLink.download = new Date().getTime();
            eleLink.href = url;
            eleLink.click();
            eleLink.remove(); // 用完释放URL对象
            URL.revokeObjectURL(url);
          });
        };
      }
    };
    // 收藏成功回调
    let successcollct = (val) => {
      console.log(val);
      if (val.type == 1) {
        data.datalist.collect = 1;
        console.log(data.datalist.collect);
      } else {
        data.datalist.collect = 0;
      }
    };
    // 喜欢
    let getlike = (item) => {
      if (!userInfo.value) return ElMessage.warning("请先登录");

      like({ id: item.id }).then((res) => {
        ElMessage.success("点赞成功");
        let datas = {};
        datas.id = item.id; // id
        datas.type = item.type; // 类型
        datas.userId = item.createId; // 作者id
        item.praise += 1;
        getdetail();
      });
    };
    let zaixian = () => {
      console.log(data.modelId);
      SDpop.value.opensdpop(data.modelId);
    };
    let cupprompt = (inputString) => {
      const prompts = {
        positive: [],
        negative: [],
      };

      const negativePrompt = "Negative prompt:";
      const index = inputString.indexOf(negativePrompt);
      if (index !== -1) {
        const str1 = inputString.substring(0, index);
        const str2 = inputString.substring(index + negativePrompt.length);
        prompts.positive.push(...str1.split(","));
        prompts.negative.push(...str2.split(","));
      } else {
        prompts.positive.push(inputString);
      }

      return prompts;
    };
    let getdetail = () => {
      // , phone: userInfo.value.userId || ""
      detail({ id: data.id }).then((res) => {
        hideLoading();
        data.productList = [];
        data.datalist = {};
        data.datalist = res.data;
        store.commit("setmoduleID", res.data.title);
        data.chuanzuodetail = convertSpecialSymbol(res.data.details);
        data.typemoxing = res.data.type;
        store.commit("setdetailid", res.data.id);
        data.myEvaluate = res.data.myEvaluate;
        data.value = res.data.evaluate || 5;
        data.modelId = data.datalist.data[0].modelId;

        let judgment = {};
        judgment.type = res.data.type; // 图片模型
        judgment.source = res.data.source; // 什么图片
        judgment.checkPoint = res.data.checkPoint; // 什么模型
        judgment.categoryId = res.data.categoryId; // 高级搜索
        console.log(judgment);
        store.commit("setinfoRecommendyou", JSON.stringify(judgment));
        // getdownloadClick();
        getdetailslist();

        // emit("judgment", judgment);
        if (data.datalist.type == 0) {
          data.img = data.datalist.data;
        } else {
          data.img = data.datalist.indexImgs.data;
        }
        if (data.datalist.data[0].zhPrompt != "") {
          data.namepromeCheck = true;
        }
        if (data.datalist.type == 0) {
          data.labelList = res.data.labels.split(",");
          data.key;
          let promtps = cupprompt(data.datalist.data[0][data.nameprome]);

          let clueconfigList = ["Size", "Seed", "CFG scale", "Steps"];
          if (promtps.negative.length) {
            data.clueConfig = {}; // 提示词Size ENSD Seed CFG scale  Steps
            promtps.negative.forEach((item, index) => {
              let keyList = item.split(":");
              let clueKey = keyList[0].trim();
              clueconfigList.forEach((ite) => {
                if (clueKey.indexOf(ite) != -1) {
                  data.clueConfig[ite] = keyList[1];
                }
              });
            });
          }

          data.CueWord = promtps.positive.join(",");
          // let fanCueWordTitle = promtps.negative.join(",");
          // let indexIdx;
          // clueconfigList.forEach((item) => {
          //   let idx = fanCueWordTitle.indexOf(item);
          //   if (!indexIdx || idx < indexIdx) {
          //     indexIdx = idx;
          //   }
          // });
          // data.fanCueWord = fanCueWordTitle.substring(0, indexIdx);

          let fanCueWordTitle = "";
          for (let i = 0; i < promtps.negative.length; i++) {
            let item = promtps.negative[i];
            let hasIdx = false;
            clueconfigList.forEach((ite) => {
              if (item.indexOf(ite) != -1) {
                hasIdx = true;
              }
            });

            if (hasIdx) {
              break;
            } else {
              fanCueWordTitle += item + ",";
            }
          }
          fanCueWordTitle = fanCueWordTitle.slice(0, -1); //去除最后,
          data.fanCueWord = fanCueWordTitle;

          data.compileType =
            res.data.source == 0
              ? "SD"
              : res.data.source == 1
              ? "MJ"
              : res.data.source == 2
              ? "DE"
              : res.data.source == 3
              ? "NJ"
              : res.data.source == 4
              ? "TM"
              : "其他";
          data.datalist.listModel.forEach((item, index) => {
            let moxingdata = {};
            moxingdata.img = item.data[0].url;
            moxingdata.title = item.title;
            moxingdata.content = item.detail;
            moxingdata.downLoad = "";
            moxingdata.id = item.id;
            moxingdata.bannerimg =
              item.indexImgs && item.indexImgs.data && item.indexImgs.data[0]
                ? item.indexImgs.data[0].url
                : "";
            moxingdata.userImgs = item.userImgs;
            data.productList.push(moxingdata);
          });
        } else {
          getChekpoint();
        }
      });
    };

    let copyNows = (val) => {
      copyData(val);
    };
    let copyNow = () => {
      // console.log(data.datalist.prompt);

      // copyData(data.CueWord + data.fanCueWord);
      copyData(data.datalist.data[0][data.nameprome]);
    };
    let lanListClck = (index) => {
      data.lancurrent = index;
      if (data.namepromeCheck) {
        data.nameprome = index == 0 ? "zhPrompt" : "prompt";
      }
      getdetail();
    };
    let closewindow = () => {
      data.openWordCheck = true;
    };
    let openWordCheckClick = () => {
      data.openWordCheck = false;
    };
    let changeimg = (e) => {
      let promtps;
      // type == 1 模型 type == 0 图片
      if (data.datalist.type == 1) {
        promtps = cupprompt(data.datalist.indexImgs.data[e][data.nameprome]);
      } else {
        promtps = cupprompt(data.datalist.data[e][data.nameprome]);
      }
      data.CueWord = promtps.positive.join(",");
      data.fanCueWord = promtps.negative.join(",");
      carouselHeight.value = carouselRef._value[e].offsetHeight + "px";
      data.tishiciimg[0].content =
        carouselRef._value[e].offsetWidth +
        "*" +
        carouselRef._value[e].offsetHeight;
    };
    //切换
    let gundong = () => {
      let num = data.modeljieshao[2].list.length;
      if (data.moCHeck == false && data.moCurrent <= num - 2) {
        data.moCurrent++;
      } else {
        data.moCHeck = true;
        if (data.moCHeck == true && data.moCurrent > 0) {
          data.moCurrent--;
          // console.log(data.moCurrent);
        } else {
          data.moCHeck = false;
          data.moCurrent++;
        }
      }
    };
    // 复制全部
    let copyDataALL = (item) => {
      var chufa = "";

      data.modeljieshao[3].list.forEach((item, index) => {
        chufa += item;
        if (index != data.modeljieshao[3].list.length - 1) {
          chufa += " ,";
        }
      });
      copyData(chufa);
    };
    const calculateCarouselHeight = async (event) => {
      data.tishiciimg[0].content =
        carouselRef._value[0].offsetWidth +
        "*" +
        carouselRef._value[0].offsetHeight;
      carouselHeight.value = carouselRef._value[0].offsetHeight + "px";
      // if(){
      // width: 100%;
      // }

      console.log(data.img);
      // 创建实例对象
      var img = new Image();
      // 图片地址
      img.src = data.img[0].url;
      // 打印
      // console.log("width:" + img.width + ",height:" + img.height);
      if (img.width > 1500) {
        data.bigimg = true;
      } else {
        data.bigimg = false;
      }
      // const image = event.target;
      // const imageHeight = image.offsetHeight; // 获取图片高度
      // // let height;
      // carouselHeight.value = imageHeight + "px";

      // if (imageHeight > 700) {
      //   height = imageHeight / 1.9142;
      // } else {
      //   height = imageHeight;
      //   if (height < 500) {
      //     height = 500;
      //   }
      // }

      // carouselHeight.value = height + "px";
      // console.log(height);
    };
    let gobakc = () => {
      router.back();
    };
    let gouserdetail = () => {
      if (!accessToken.value) {
        return ElMessage.warning("请先登录");
      }
      router.push({
        path: "/gouserinfo",
        query: { id: 0, phone: data.datalist.phone },
      });
    };
    // 版本选中
    let versionClick = (it) => {
      data.downCheck = false;
      // data.urlData.forEach((item, index) => {
      let url = it.url;
      // setTimeout(() => {
      downloadByBlob(url, 1);
      // }, index * 500);
      // });
    };
    let openurl = () => {
      if (data.datalist.isOriginal == 1) {
        let url;
        // if (
        //   data.datalist.orUrl.indexOf("http://" == -1) ||
        //   data.datalist.orUrl.indexOf("https://" == -1)
        // ) {
        //   url = "http://" + data.datalist.orUrl;
        //   console.log(url);
        // } else {
        url = data.datalist.orUrl;
        // }
        window.open(url, "_blank");
      }
    };
    let godetailssss = (val) => {
      console.log(val);
      router.push({
        path: "/detailInfo",
        query: { id: val.id },
      });
      // data.id = val.id;
      // getdetail();
    };
    let noopen = () => {
      return ElMessage.warning("暂未开放，敬请期待");
    };
    // 关注
    let attention = (val) => {
      if (!userInfo.value) return ElMessage.warning("请先登录");

      if (val == 1) {
        quxiaoguanzhu();
        if (data.datalist.miniId) {
          gofollowNow(data.datalist.miniId);
        }
      } else {
        getguanzhu();
        if (data.datalist.miniId) {
          gofollowNow(data.datalist.miniId);
        }
      }
    };
    // 社区关注以及取消关注
    let gofollowNow = (id) => {
      followNow({ posts_user_id: id }).then((res) => {});
    };
    //取消关注
    let quxiaoguanzhu = () => {
      deleteuser({ targetId: data.datalist.phone }).then((res) => {
        data.datalist.map.isCares = 0;
        ElMessage.success("取消关注");
      });
    };
    let share = () => {
      noopen();
    };
    //
    let modulImgLICK = (item) => {
      console.log(item);
      // showLoading;
      // data.id = item.modelId;
      // getdetail();3
      router.push({
        path: "/detailInfo",
        query: { id: item.modelId },
      });
    };
    // 分享
    let fuzhi = () => {
      copyData(window.location.href);
    };
    // 取消点赞
    let quxiaodianzan = (item) => {
      if (!userInfo.value) return ElMessage.warning("请先登录");

      deletelike({ id: item.id }).then((res) => {
        ElMessage.success("取消成功");
        item.praise -= 1;
        getdetail();
      });
    };
    // 删除模型
    let shanchus = () => {
      ElMessageBox.confirm("确认删除该项目吗", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          shanchu();
        })
        .catch(() => {});
    };
    let shanchu = () => {
      modealdel({ id: data.datalist.id }).then((res) => {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        router.back();
      });
    };

    // 查看大图
    let viewImg = (item, index) => {
      let imgList = data.img.map((item) => item.url);
      data.imgViewerList = imgList;
      console.log(data.imgViewerList);
      data.viewImgIndex = index;
      data.imgViewerVisible = true;
      const m = (e) => {
        e.preventDefault();
      };
      document.body.style.overflow = "hidden";
      document.addEventListener("touchmove", m, false); //禁止页面滑动
    };

    let closeImgViewer = () => {
      data.imgViewerVisible = false;
      const m = (e) => {
        e.preventDefault();
      };
      document.body.style.overflow = "auto";
      document.addEventListener("touchmove", m, true); //禁止页面滑动
    };
    let chongzhiqueren = () => {
      payPwdRef.value.open();
    };
    // 确认支付
    let postPostsPay = () => {};
    return {
      SDpop,
      zaixian,
      // goldCredit,
      // coinsConfig,
      // payObjInfo,
      postPostsPay,
      chongzhiqueren,
      payPwdRef,
      beforeunloadHandler,
      convertSpecialSymbol,
      copyNows,
      copyDataALL,
      numToKW,
      closeImgViewer,
      viewImg,
      shanchu,
      shanchus,
      quxiaoguanzhu,
      banbenCheck,
      getdetailslist,
      userInfo,
      bianjimoxing,
      getFileType,
      pingjiasuccess,
      getevaluate,
      accessToken,
      fuzhi,
      quxiao,
      collects,
      successcollct,
      getguanzhu,
      getdownloadClick,
      getcollect,
      close,
      quxiaodianzan,
      getlike,
      modulImgLICK,
      noopen,
      share,
      attention,
      godetailssss,
      openurl,
      versionClick,
      buttonClick,
      gobakc,
      changeimg,
      getdetail,
      gouserdetail,
      copyNow,
      copyData,
      closewindow,
      openWordCheckClick,
      lanListClck,
      gundong,
      carouselHeight,
      carouselRef,
      calculateCarouselHeight,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.dengjiLV {
  background-color: #a1efc1;
  font-size: 14px;
  color: #fff;
  padding: 0 5px;
  border-radius: 5px;
}
.imgmoxing {
  padding: 10px;
  margin-top: 10px;
  width: 440px;
  height: 80px;
  background: #f3f4f5;
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  > img {
    width: 60px;
    height: 60px;
    border-radius: 20px;
  }
  .imgspan {
    margin-left: 10px;
    > span {
      &:first-child {
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #000000;
      }
      &:last-child {
        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #656f79;
      }
    }
  }
}
.goumaojine {
  margin-top: 40px;
  margin-bottom: 20px;
  > span {
    font-size: 16px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #000000;
  }
  .red {
    color: #ff425b;
  }
}
.queren {
  margin: 0 auto;
  width: 182px;
  height: 40px;
  background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
  border-radius: 90px 90px 90px 90px;
  font-size: 14px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: 700;
  color: #ffffff;
}
.yuebuzu {
  margin-top: 20px;
  > span {
    font-size: 12px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #ff425b;
  }
  .blue {
    color: #64c8dc;
  }
}
::v-deep .el-dialog__title {
  font-size: 16px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: 700;
  color: #000000;
}
::v-deep .el-dialog__header {
  margin-right: 0;
}
// 预览大图
// .imgViewClass {
//   width: 0;
//   height: 0;
// }

.gognitem {
  margin-left: 20px;

  > span {
    color: #656f79;
    font-size: 12px;
    padding-top: 4px;
  }
}
.buttonlist {
  position: absolute;
  top: 45px;
  left: 0;
  z-index: 2;
  max-width: 260px;
  min-width: 176px;
  border-radius: 10px;
  // height: 140px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;

  .buttonitems {
    cursor: pointer;
    padding: 10px;
    height: 40px;
    background-color: #fff;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }
    &:hover {
      background: rgba(100, 200, 220, 0.12);
      > span {
        color: #64c8dc;
      }
    }
    &:first-child {
      margin-top: 10px;
    }
    &:last-child {
      margin-bottom: 10px;
    }
  }
}
.detaildiv {
  align-items: flex-start;
  width: 100%;
  padding-right: 20px;
}
.gobakcnow {
  position: fixed;
  top: 150px;
  left: 160px;
  width: 24px;
  height: 24px;
}
.detail {
  padding: 20px 0 20px 20px;
  align-items: flex-start;
  margin: 0 auto;
  width: 1000px;
  background: #ffffff;
  box-shadow: 0px 0px 20px 0px rgba(20, 20, 20, 0.1);
  border-radius: 40px 40px 40px 40px;
  opacity: 1;
  .detailLeft {
    position: relative;
    width: 50%;

    .detaillist {
      position: relative;
      width: 480px;
      max-width: 700px;
      height: 100%;

      border-radius: 20px;
      .dujiang {
        position: absolute;
        top: 14px;
        right: 10px;
        .dujiaitem {
          width: 36px;
          height: 46px;
        }
      }
      .detailimg {
        width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 20px;
        overflow: hidden;
        position: relative;
        &:hover {
          .imgs-hover-box {
            opacity: 1;
          }
        }
        .imgs {
          object-fit: contain;
          border-radius: 20px;
          // width: 100%;
          // width: 480px;
          height: 700px;
          // height: 100%;
        }
        .longimgs {
          object-fit: contain;
          border-radius: 20px;
          width: 100%;
          // width: 480px;
          // height: 700px;
          // height: 100%;
        }
        .imgs-hover-box {
          position: absolute;
          bottom: 12px;
          right: 12px;
          opacity: 0;
          transition: all 0.3s;
          > div {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.5);
            font-size: 18px;
            margin-left: 10px;
            cursor: pointer;
            &:hover {
              background: rgba(0, 0, 0, 0.7);
            }
          }
        }
      }
      .popgo {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 50px;
        z-index: 10;
        height: 20px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        > span {
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }
  .rightbox {
    width: 100%;
  }
  .detailright {
    overflow: auto;
    width: 50%;
    padding-left: 17px;
    height: 100%;
    .down {
      position: relative;
      .button {
        width: 170px;
        height: 40px;
        background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
        border-radius: 10px 10px 10px 10px;
        opacity: 1;
        > img {
          cursor: pointer;
          width: 16px;
          > img {
            cursor: pointer;
            width: 16px;
            &:active {
              opacity: 0.7;
            }
          }
        }
        > span {
          margin: 0 10px;
          font-size: 12px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: 700;
          color: #ffffff;
        }
        > img {
          cursor: pointer;
          width: 16px;
          &:active {
            opacity: 0.7;
          }
        }
      }
      .button-img {
        width: 260px;
      }

      .button-create-img {
        width: 96px;
        margin-left: 10px;
        background: rgba(101, 200, 220, 0.1);
        > span {
          color: #65c8dc;
          margin: 0;
          margin-left: 10px;
        }
      }
    }
    .anniu {
      margin-right: 10px;
      > img {
        cursor: pointer;
        margin-left: 20px;
        width: 22px;
      }
    }
  }
}
.useleft {
  align-items: flex-start;
  flex: 1;
  padding-right: 20px;

  .userinfos {
    margin-left: 10px;
    > span {
      display: block;
      margin-bottom: 5px;
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #000000;
    }
    .userinfos-detail {
      flex: 1;
    }
    .userinfos-detail > span {
      font-size: 12px;
      color: #656f79;
      padding-top: 10px;
      word-wrap: break-word;
      width: 280px;
      // white-space: normal;
      // display: block;
    }

    .xiazai {
      > img {
        cursor: pointer;
        width: 13px;
      }
      > span {
        margin-left: 3px;
        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #656f79;
      }
      &:last-child {
        margin-left: 10px;
      }
    }
  }
}
.detailuser {
  margin-top: 34px;
  border-bottom: 1px solid #ececec;
  padding-bottom: 24px;

  .quxiaoattention {
    cursor: pointer;
    width: 90px;
    height: 40px;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    border: 1px solid #ececec;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      color: #000000;
    }
    &:active {
      opacity: 0.7;
    }
  }
  .attention {
    cursor: pointer;
    width: 90px;
    height: 40px;
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    > span {
      font-size: 18px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #ffffff;
    }
    &:active {
      opacity: 0.7;
    }
  }
}

// 版本
.version-box {
  padding-top: 20px;
  > div {
    width: 54px;
    height: 26px;
    border-radius: 6px 6px 6px 6px;

    opacity: 1;
    border: 1px solid #64c8dc;
    font-size: 12px;
    color: #64c8dc;
    text-align: center;
    line-height: 26px;
    margin-right: 10px;
  }
}
.version-boxactive {
  > div {
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    color: #fff !important;
    border: none;
  }
}
.detailmoxing {
  position: relative;
  align-items: flex-start;
  margin-top: 20px;
  .detailtle {
    width: 100%;
    .mingcheneg {
      position: relative;
      // margin-top: 50px;
      margin-top: 10px;
    }

    // .datailtle-title {
    > span {
      font-size: 18px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #000000;
      &:first-child {
        word-break: break-all;
        // width: 300px;
        display: block;
      }
      &:last-child {
        width: 100%;
        display: block;
        height: 200px;
        overflow: auto;
        margin-top: 30px;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #656f79;
      }
    }
    // }
  }
  .rightmoxingdetal {
    top: -31px;
    right: 0;
    position: absolute;
    .start {
      margin-right: 3px;
      .svg {
        margin-right: 3px;
        width: 14px;
        height: 14px;
      }
    }
  }
}
.imgbian {
  margin-right: 27px;
  width: 24px;
  height: 24px;
  &:first-child {
    margin-right: 10px;
  }
}
.typeboxs {
  margin-bottom: 20px;
  flex-wrap: wrap;
  .typeItems {
    margin-top: 10px;
    margin-right: 10px;
    // width: 76px;
    height: 26px;
    padding: 0 2px;
    background: rgba(75, 184, 119, 0.1216);
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #4bb877;
    }
  }
}
.typebox {
  // margin-bottom: 20px;
  flex-wrap: wrap;
  .typeItem {
    margin-top: 10px;
    margin-right: 10px;
    width: 76px;
    height: 26px;
    background: rgba(103, 201, 220, 0.12);
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #65c8dc;
    }
  }
}
.model {
  border-radius: 20px;
  width: 100%;
  background-color: #f7f9fa;
  padding: 12px 22px;
  margin-top: 10px;
  > span {
    font-size: 14px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    color: #000000;
  }
  .modetal_item {
    margin-top: 7px;
    .model_detail {
      > span {
        &:first-child {
          width: 80px;
          display: block;
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #656f79;
        }
        &:last-child {
          margin-right: 4px;
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #000000;
        }
      }
      .model_list {
        width: 231px;
        height: 26px;
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
        border: 1px solid #4bb877;
        .hashtitle {
          width: 86px;
          height: 100%;
          border-right: 1px solid #4bb877;
          > span {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #4bb877;
          }
        }
        .hashcontent {
          width: 189px;
          height: 100%;
          > span {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #4bb877;
          }
        }
        .hashswitch {
          width: 42px;
          height: 100%;
          border-left: 1px solid #4bb877;
        }
      }
    }
  }
}

.chufa {
  width: 338px;
  overflow: auto;
  padding-bottom: 10px;
  .chufaitem {
    padding: 0 10px;
    margin-right: 10px;
    // width: 98px;
    height: 26px;
    background: rgba(75, 184, 119, 0.12);
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
    > span {
      white-space: nowrap;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #4bb877;
    }
  }
}
.modeldescription {
  margin-top: 20px;
  padding: 12px 22px;
  background-color: #f7f9fa;
  border-radius: 20px;
  > span {
    font-size: 14px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    color: #000000;
  }
  .descriptin {
    // height: 158px;
    max-height: 144px;
    overflow: auto;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #656f79;
    }
  }
}

.MJdetail {
  margin-top: 15px;
  position: relative;
  .topMJ {
    > span {
      font-size: 18px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #000000;
    }
    .MJtitle {
      .MJitem {
        width: 50px;
        height: 26px;
        background: rgba(109, 219, 152, 0.1216);
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
        > span {
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #6ddb98;
        }
      }
      .lan {
        margin-left: 10px;
        // width: 63px;
        height: 26px;
        background: rgba(161, 240, 192, 0.1216);
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
      }
      .lanactive {
        background: #6ddb98;
        border-radius: 6px 6px 5px 6px;
        opacity: 1;
        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #ffffff !important;
        cursor: pointer !important;
      }
      .lanitem {
        width: 30px;
        height: 22px;
        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #6ddb98;
        // cursor: not-allowed !important;
      }
    }
  }
  .tishipanel-box {
    background: #f7f9fa;
    border-radius: 20px 20px 20px 20px;
  }

  .tishipanel {
    overflow: hidden;
    position: relative;
    padding: 10px 10px 0;
    margin-top: 12px;
    width: 460px;
    height: 100px;
    line-height: 18px;
    opacity: 1;
    .tishibox {
      min-height: 50px;
      // align-items: flex-end;
      > span {
        display: block;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #656f79;
      }
      .cuo {
        width: 100%;
        align-items: flex-end;
        justify-content: flex-end;
        .zheng {
          text-align: right;
          display: block;
          margin: 11px 0;
        }
      }
    }
    .tishiimg {
      // padding-bottom: 14px;
      padding-top: 10px;
      width: 80%;
      div {
        > span {
          margin-left: 6px;
          font-size: 12px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #656f79;
        }
      }
    }
    // .copy {
    //   justify-content: flex-end;
    // }
  }

  .tishipanel-open {
    height: auto;
  }

  .copy-box {
    // padding-bottom: 14px;
    // width: 80%;
    justify-content: flex-end;
    padding: 10px 10px 10px;
    .zhankai {
      transition: all 0.3s;
    }
    .zhankai-open {
      transform: rotate(-180deg);
    }
  }
}
.usermodrul {
  height: 230px;
  margin-top: 30px;
  > span {
    font-size: 18px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    color: #000000;
  }
}
.openword {
  margin-top: 12px;
  width: 450px;
  height: 60px;
  background: #f7f9fa;
  border-radius: 20px 20px 20px 20px;
  opacity: 1;
  > span {
    font-size: 18px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    color: #67c9dc;
  }
}
/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #ececec;
  border-radius: 7px;
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f7f9fa;
}

/* 鼠标悬停时滚动条轨道样式 */
::-webkit-scrollbar-track:hover {
  background-color: #f7f9fa;
}
/* 滚动条整体样式 */
::-webkit-scrollbar {
  position: relative;
  right: 20px !important;
  padding-right: 2px;
  width: 0;
  height: 7px;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
  border-color: #9ed8e6;
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #656f79;
}
</style>
